<link rel="stylesheet" type="text/css" href="<?=base_url()?>file/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<?=base_url()?>file/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>file/shell/smooth/resources/css/jquery.dataTables.css" />

	<div class="page-title">
		<h2><?=$title?></h2>
	</div>
<div class="box">


	<form action="<?=base_url()?>index.php/jc/journey/sgp">

	<table class="general alignleft">
		<thead>
			<tr>
				<th>Territory</th>
				<th><?php echo $region.', '.$cluster;?></th>
			</tr>
		</thead>

		<tr>
			<td>Smartfren Gadget Premium</td>
			<td>
				<select name="sales_id" id="sales-id">
					<option value="">Pilih SGP</option>
          <?php foreach ($sgp as $key) : ?>
              <option value="<?php echo $key->user_group_id.'_'.$key->user_id; ?>" ><?php echo $key->user_id.' | '.$key->user_name; ?></option>
          <?php endforeach; ?>
				</select>
			</td>
		</tr>
		<tr>
			<td>Kategory Outlet</td>
			<td>
				<select name="outlet_category" id="outlet_category">
					<option value=""></option>
					<?php 
						foreach ($category["outlet_category_ho"] as $key) {
              echo '<option value="'.$key->program_id.'">'.$key->caption.'</option>'."\n\r";
							// echo '<option value="'.$key->lookup_value.'">'.$key->lookup_desc.'</option>'."\n\r";
						}
					?>
				</select>
			</td>
		</tr>
		<tr>
			<td>Bulan Referensi</td>
			<td>
				<select name="month" id="month" class="d_jc_sfa">
				<?php 
					foreach ($months as $key ) {

						if (date('Ym') == $key[0]) 
							echo '<option value="'.$key[0].'" selected="selected">'.$key[1].'</option>';
						else
							echo '<option value="'.$key[0].'">'.$key[1].'</option>';
					}
				?>
				</select>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<div id="button">
					<button id="show-jc">Tampilkan JC</button>
					<button id="add-jc">Tambahkan Outlet ke JC</button>
				</div>
			</td>
		</tr>
	</table>


	</form>

	<div id="jc-table">

	</div>

	<div id="populate">
		<img src="<?=base_url()?>file/images/spinner.gif"> Populate Journey Cycle
	</div>

	<div id="outlet-list" style="">
     <table id="dataList" width="100%" class="dataTable">
       <thead>
         <tr>
           <th width="100px">ID Outlet</th>
           <th>Nama Outlet</th>
           <th>Alamat Outlet</th>
           <th>Kategori</th>
           <th>Check</th>
         </tr>
       </thead>
       
       <tbody><!-- Here goes the datatables --></tbody>
     
     </table>


	</div>

</div> <!-- Box -->

<script type="text/javascript">
	$(document).ready(function() {
	
		$('#outlet-list').dialog({
			autoOpen: false,
			modal: true, title: "Tambahkan outlet ke Journey Cycle",
			height: 500, width: 750,
      buttons: {
        "Tambahkan ke JC": function() {
        	var status = tambahOutletKeJC();
          $( this ).dialog( "close" );
        }
      }
		});

		$('#populate').hide(); //$('#pesan').hide();

		$("#show-jc").click(function(event){
			if( $('#sales-id').val() == '' || $('#sales-id').val() == null || $('#selling-type').val() == 0 ) 
				{ 
					event.preventDefault();
					alert('Nama Sales tidak boleh kosong'); 
				}
			else 
			{
				var sales_id = $('#sales-id').val().split('_');
				var month		 = $('#month').val();
				var p = {};
				p["t_mtr_channel_program/cp:program_id"] = $('#outlet_category').val();
				event.preventDefault();
				$('#jc-table').empty(); $('#populate').show();
				$.post(
					// '<?=base_url()?>index.php/jc/journey/sfa',
					'<?=base_url()?>index.php/jc/load_journey',
					{sales_id:sales_id[1],user_group_id:sales_id[0],month_work:month, program: p},
					function(data) {
						if(data.channels_maintained == 0 ) {
							$('#jc-table').show(); $('#populate').hide();
							$('#jc-table').html('Tidak ada Outlet yang dikelola');
						}
						else {
							$('#jc-table').show(); $('#populate').hide();
							$('#jc-table').html(data.journey_summary);
							
						}
					},"json"
				);
			}
		});

  //================================================================================================
  $( "#add-jc" ).click(function() {
    event.preventDefault();

    if( $('#sales-id').val() == '' || $('#sales-id').val() == null ) 
      { alert('Nama Sales tidak boleh kosong'); }
    else if ( $('#outlet_category').val() == '' || $('#outlet_category').val() == null )
      { alert('Program harus dipilih'); }
    else {
      $( "#outlet-list" ).dialog( "open" );

   	  $('#dataList').dataTable({
   	  	"bDestroy"   : true,
  	    "bProcessing": true,
  	    "bServerSide": true,
  	    "aoColumnDefs": [
          { "bSortable": false, "aTargets": [ 4 ] }
        ],
  	    "sAjaxSource": "<?php echo base_url('index.php/jc/dataList');?>/"+$('#sales-id').val()+"/"+$('#month').val()+"/"+$("#outlet_category").val()+"/",
  	    "fnDrawCallback": function() {
  				tambahOutletKeJC();
  		  }
  	  });
    } 

  });// end of button #add-jc clicked
  //================================================================================================

	}); // end of ready function
	

function tambahOutletKeJC() {
	var jumlah = $('#dataList :checked').length;
	p = [];
	$('#dataList :checked').each( function() {
		p.push($(this).val());
	});
	// p = $('#dataList :checked');
	if(jumlah > 0) {
		$.post(
			"<?php echo base_url() ?>index.php/jc/addOutletToJC",
			{userId: $('#sales-id').val(), outletId: p, yyyymm: $('#month').val() }
		);
	}
}

function simpan (param) {
    var id_attr      = param.split('_');
    var channel_id   = id_attr[0];
    var territory_id = id_attr[1];
    var yyyymm       = id_attr[2];
    var day          = id_attr[3];
    var sales_id     = $('#sales-id').val().split('_');
    var nilai        = $(':checkbox#'+param).is(':checked');

    $.post(
      '<?=base_url()?>index.php/jc/save_jc/36', 
      {user_id:sales_id[1],channel_id:channel_id,territory_id:territory_id,month:yyyymm,day:day,nilai:nilai},
      function(data) {
        $(".pesan").html(data.messege).fadeIn(1000).fadeOut(1000);
      },
      "json"
    );
}
</script>